<template>
  <div class="pie-right" id="pieRight"></div>
</template>

<script>
export default {
  mounted() {
    this.drawPieRight();
  },
  methods: {
    drawPieRight() {
      var myChart = this.$echarts.init(document.getElementById("pieRight"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // 注意颜色写的位置
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        legend: {
          left: "center",
          top: "bottom",
          bottem: "0%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: ["10%", "70%"],
            // 位置
            center: ["50%", "50%"],
            // 半径模式
            roseType: "radius",
            itemStyle: {
              borderRadius: 5,
            },
            // 链接图像和文字的线条
            labelLine: {
              // 链接图形的线条长度
              length: 6,
              // 链接文字的线条长度
              length2: 8,
            },
            data: [
              { value: 20, name: "云南" },
              { value: 26, name: "北京" },
              { value: 24, name: "山东" },
              { value: 25, name: "河北" },
              { value: 20, name: "江苏" },
              { value: 25, name: "浙江" },
              { value: 30, name: "深圳" },
              { value: 42, name: "广东" },
            ],
            // 修饰饼形图文字相关的样式 label对象  每块的标识文字
            label: {
              fontSize: 15,
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 让图标跟着屏幕去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style>
.pie-right {
  width: 100%;
  height: 100%;
}
</style>
